<script setup>
import FirstTitle from "@comp/FirstTitle";
const city = window.globalObj.name;

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataKqzy } from "@/api/search";
import { addOrUpdateKqzy } from "@/api/addOrUpdate";

const html = ref(
  `主要明确力量抽组、物资筹措、运输投送、转隶交接等关键环节的组织实施方法，以及复杂情况设想和应付处置要点等。`
);

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();
const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");

// 加载html
const initHtml = () => {
  searchDataKqzy({ m: "行动要点" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "力量抽组的组织实施方法")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "物资筹措的组织实施方法")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "运输投送的组织实施方法")?.v || "";
	valueHtml3.value = data.find((x) => x.k === "转隶交接的组织实施方法")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "复杂情况设想和应对处置要点")?.v || "";

  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "<p>根据跨区支援任务需要，当需要单一专业力量支援时，从平时建设或平战转换扩编的专业力量中，按专业成建制抽组人防专业队，直接投入跨区支援行动；当需要多种专业力量支援时，可从平时建设和平战转换扩编的专业力量中，按专业抽组混编成综合支援队伍，集中组织投入跨区支援行动；当多专业混编支援时，应指定整个编队的总负责人和各专业的负责人，明确职责、指挥关系和协同组织等事项。</p>"
);
const valueHtml1 = ref(
  "<p>当政府储备有支援保障需要的物资时，可按照先动用战储，随动随补的方式筹措；当政府储备没有支援保障需要的物资时，可直接启动政府采购程序筹措；当战储和政府采购均不能及时满足支援保障需要时，应动员生产企业紧急生产支援或组织社会捐赠。</p>"
);
const valueHtml2 = ref(
  "<p>跨区支援专业力量的运输投送，采取自行保障与运输专业队保障投送相结合的方法组织实施；跨区支援物资由运输专业队集中负责运输投送，运输投送力量按购买社会服务或临时征用的方式组织实施；运输投送途中的油料、维修保障，以车辆所属单位保障为主，必要时，由相应任务的组织指挥单位统一协调保障。</p>"
);
const valueHtml3 = ref(
  "<p>由上级指挥部组织支援单位和被支援单位现场交接，主要是对情况、任务、要求，参加人员、装备、物资交接，同时明确转隶后的指挥、协同、保障关系。</p>"
);
const valueHtml4 = ref(
  "<p>情况设想1：某城市突然遭受空袭，破坏严重，救援力量严重不足，急需多个专业队同步展开跨区救援行动。由于事发突然，辖区平战转换尚未完成，各专业队尚未完成战时扩编。<br/>处置要点：立即启动跨区救援方案，按照上级命令同步召集、集结现有专业队力量，尽快展开首批跨区支援行动。同时，迅速启动战时专业队扩编方案，尽快完成后续力量集结，接续展开后续批次跨区支援行动。<br/>情况设想2：多个城市遭受空袭后，生活物资短缺，同时需要提供跨区支援保障。<br/>处置要点：启封战储生活物资，按照上级命令，采取分批次多地同步支援保障的方式展开跨区支援保障行动。同时，迅速启动政府采购程序，及时补充战储物资。<br/>情况设想3：连续实施跨区支援行动后，本辖区扩编的交通运输专业队力量严重不足，难以持续完成跨区运输投送保障任务。<br/>处置要点：迅速加大战时动员，尽可能扩编交通运输专业队规模，同时，有计划地征召部分志愿者力量参加跨区运输投送保障行动。</p>"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateKqzy({
      m: "行动要点",
      data: [
        {
          k: "力量抽组的组织实施方法",
          v: valueHtml.value,
        },
        {
          k: "物资筹措的组织实施方法",
          v: valueHtml1.value,
        },
        {
          k: "运输投送的组织实施方法",
          v: valueHtml2.value,
        },
        {
          k: "转隶交接的组织实施方法",
          v: valueHtml3.value,
        },
        {
          k: "复杂情况设想和应对处置要点",
          v: valueHtml4.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
});
</script>
<template>
  <div>
    <div class="box text-page">{{ html }}</div>

    <FirstTitle name="力量抽组的组织实施方法" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="物资筹措的组织实施方法" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="运输投送的组织实施方法" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="转隶交接的组织实施方法" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="复杂情况设想和应对处置要点" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
